<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./windy.js"></script>
    <style>
      body {
        padding: 0px;
        margin: 0px;
        box-sizing: border-box;
        position: absolute;
        height: 100%;
        width: 100%;
        overflow: hidden;
      }
      #canvas {
        box-sizing: border-box;
        /* background-color: black; */
        background-image: url(../assets/world.jpg);
        background-size: 100% 100%;
      }
    </style>
  </head>
  <body style="padding: 0px; margin: 0px">
    <canvas id="canvas"></canvas>

    <script>
      function getData(url) {
        return new Promise((resolve) => {
          fetch(url)
            .then((res) => res.json())
            .then(function (res) {
              resolve(res);
            });
        });
      }
      async function main() {
        //风场信息数据
        const header = await getData('./info.json');
        //风场uv方向数据
        // const data = await getData('./wind.json');

        const canvas = document.getElementById('canvas');
        canvas.width = 1200;
        canvas.height = 600;
        const cw = new Windy({
          header,
          // data,
          canvas,
          //运动速度
          speed: 0.1,
          //随机点数量
          particlesCount: 1000,
          //生命周期
          maxAge: 120,
          //1秒更新次数
          frame: 10,
          //线渐变
          color: {
            0: 'rgba(255,255,0,0)',
            1: '#ffff00'
          },
          // color: '#ffff00',
          //线宽度
          lineWidth: 3,
          imageUrl: 'wind.png',
          autoAnimate: true
        });
      }
      main();
    </script>
  </body>
</html>
